<template>
	<view class="container">
		<view class="header">
			<text>选择社区</text>
			<!-- <view class="button" @click="skip">跳过</view> -->
		</view>
		<view class="tips">请完善社区信息开启融创式美好生活服务</view>
		<view class="city-info">
			<view class="current">
				当前城市：
				<navigator class="city-name" :animation-duration="200" animation-type="pop-in" url="./index">{{ location.cityName || '' }}</navigator>
			</view>
			<view class="reset-location" @click="resetLocation">刷新定位</view>
		</view>
		<view class="search">
			<!-- 预留搜索-->
			<icon type="search" size="18" style=""></icon>
			<input v-model="searchText" placeholder="搜索社区名称" class="search-input" />
		</view>
		<view class="body">
			<view v-if="!searchText" class="title">全部社区</view>
			<view class="list">
				<view v-if="item.show" v-for="(item, index) in list" :key="index" @click="toPage(item)" class="list-item">
					<view v-if="item.matchText" v-html="item.matchText"></view>
					<text v-else>{{ item.projectName || '' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http, {customUrl} from '@/common/request.js';
import { mapState } from 'vuex';
import { getCommonShareInfo, authorTodo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			searchText: '',
			list: []
		};
	},
	computed: {
		...mapState({ location: state => state.location })
	},
	watch: {
		searchText: {
			handler() {
				this.doFilter();
			}
		},
		'location.cityCode': {
			handler() {
				this.queryList();
			}
		}
	},
	mounted() {
		this.queryList();
	},
	methods: {
		queryList() {
			http(customUrl.rongchuang + '/member/xcx/member/house/houseListByCity?cityCd=' + this.location.cityCode, {
				data: {},
				method: 'GET'
			}).then(result => {
				const list = result.data || [];
				for (let item of list) {
					item.show = true;
					item.matchText = '';
				}
				this.list = list;
			});
		},
		doFilter() {
			const { list, searchText } = this;
			for (let item of list) {
				if (item.projectName.includes(searchText)) {
					item.show = true;
					item.matchText = item.projectName.replace(new RegExp(searchText, 'g'), `<span style="color: #F39800;">${searchText}</span>`)
				} else {
					item.show = false;
					item.matchText = '';
				}
			}
			this.list = list;
		},
		resetLocation() {
			// #ifdef MP-WEIXIN
			authorTodo({
				type: 'userLocation',
				success: () => {
			// #endif
					uni.getLocation({
						type: 'gcj02',
						success: res => {
							this.$store.dispatch('getLocationByGPS', res);
						}
					});
			// #ifdef MP-WEIXIN
				}
			})
			// #endif
		},
		toPage({projectName, projectId, srcYrProjectId}) {
			uni.navigateTo({
				url: './build?params=' + encodeURIComponent(JSON.stringify({projectName, projectId, srcYrProjectId})),
				animationDuration: 200,
				animationType: 'pop-in'
			})
		},
		skip(){
			uni.navigateBack({
				delta: 1,
				animationDuration: 200,
				animationType: 'pop-out'
			})
		}
	}
};
</script>

<style lang="less" scoped>
@import './house.less';
</style>
